<template>
  <div>
    <el-dialog
        title="搜索"
        :visible.sync="searchShow"
        width="25%"
    >
      <el-form label-width="80px" >
        <el-form-item label="起始日期">
          <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="起始日期"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="结束日期"
              value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-button icon="el-icon-search" style="margin-left: 69%" @click="search">搜索</el-button>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>日志一览</h2>
          <el-button type="primary" icon="el-icon-search" size="medium " @click="searchWind">搜索</el-button>
        </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <el-table
            :data="tableData"
            highlight-current-row
            @current-change="handleCurrentChange"
            style="width: 100%">
          <el-table-column
              prop="logDate"
              label="日期"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="logInfo"
              label="内容"
              align="center"
          >
          </el-table-column>
        </el-table>
      </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        <div class="block">
          <el-pagination
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              :page-sizes="[5, 10,20,50]"
              :current-page="currentPage"
              @current-change="currentPageFn">
          </el-pagination>
        </div>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Daily",
  data(){
    return{
      total:0, //总行数
      pageSize:5,//每页显示的行数
      currentPage:1, //当前页
      tableData: [], //分页后的集合
      searchShow:false,
      id:'',
      startDate:'',
      endDate:'',
    }
  },
  mounted(){
    this.init()
  },
  methods:{
    handleCurrentChange(val){
      this.id=val.id
    },
    search(){
      this.init()
      this.searchShow=false //关闭弹出窗口
    },
    searchWind(){
      this.searchShow=true
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.init()
    },
    currentPageFn(currentPage){
      this.currentPage=currentPage
      this.init()
    },
    init(){
      let param = {
        page:this.currentPage,
        pageSize:this.pageSize,
        startDate:this.startDate,
        endDate:this.endDate
      }
      this.$axios.get('/api/Daily/findByItem',{params:param}).then(
          r=>{
            let obj = r.data
            this.tableData =obj.list
            this.total = obj.total
          }
      )
    }
  }
}
</script>

<style scoped>

</style>